<template>
  <div class="app-container" style="padding: 5px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="业绩汇总" name="first">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ yjSummaryData.year }}</span>
          </div>

          <el-row>
            <el-col :span="6">
              <el-card style="height:300px;">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度接单</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 60px;">
                        <tr>
                          <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.njdmoney }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 70px;">
                        <tr>
                          <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.njdqty }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="height:300px;margin-left:5px;">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度出库</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 60px;">
                        <tr>
                          <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.nckmoney }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 70px;">
                        <tr>
                          <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.nckqty }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="height:300px;margin-left:5px;">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度预计出库</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 60px;">
                        <tr>
                          <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.yjjdmoney }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 70px;">
                        <tr>
                          <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.yjjdqty }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="height:300px;margin-left:5px;">
                <div slot="header" class="clearfix">
                  <span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度预计待出库</span>
                </div>
                <el-row>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 60px;">
                        <tr>
                          <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.yjdckmoney }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                  <el-col :span="12">
                    <center>
                      <table style="margin-top: 70px;">
                        <tr>
                          <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.yjdckqty }}</span></td>
                        </tr>
                        <tr>
                          <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                        </tr>
                      </table>
                    </center>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>

        <el-row>
          <el-col :span="12">
            <el-card style="margin-top:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ yjSummaryData.month }}</span>
              </div>
              <el-row>
                <el-col :span="12">
                  <el-card style="height:300px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color: #0099ff;font-size: 16px;">月度接单</span>
                    </div>
                    <el-row>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 60px;">
                            <tr>
                              <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.yjdmoney }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 70px;">
                            <tr>
                              <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.yjdqty }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card style="height:300px;margin-left:5px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color: #0099ff;font-size: 16px;">月度出库</span>
                    </div>
                    <el-row>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 60px;">
                            <tr>
                              <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.yckmoney }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 70px;">
                            <tr>
                              <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.yckqty }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card style="margin-top:5px;margin-left:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ yjSummaryData.week }}</span>
              </div>
              <el-row>
                <el-col :span="12">
                  <el-card style="height:300px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color: #0099ff;font-size: 16px;">周接单</span>
                    </div>
                    <el-row>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 60px;">
                            <tr>
                              <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.zjdmoney }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 70px;">
                            <tr>
                              <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.zjdqty }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card style="height:300px;margin-left:5px;">
                    <div slot="header" class="clearfix">
                      <span style="font-weight: bold;color: #0099ff;font-size: 16px;">周出库</span>
                    </div>
                    <el-row>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 60px;">
                            <tr>
                              <td align="center"><span style="font-size:30px;font-weight:bold;color:#F28E2B;">{{ feeInfo.zckdmoney }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-money" style="color:#F28E2B;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#F28E2B;">金额(万元)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                      <el-col :span="12">
                        <center>
                          <table style="margin-top: 70px;">
                            <tr>
                              <td align="center"><span style="font-size:20px;font-weight:bold;color:#5470c6;">{{ feeInfo.zckqty }}</span></td>
                            </tr>
                            <tr>
                              <td align="center"><i class="el-icon-document-copy" style="color:#5470c6;font-size: 20px;"></i><span style="margin-left: 5px;font-size:20px;color:#5470c6;">数量(万)</span></td>
                            </tr>
                          </table>
                        </center>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="大类占比分析" name="second">
        <el-card>
          <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="80px" label-position="right">
            <el-form-item label="查询方式" prop="mode">
              <el-select v-model="queryParams1.mode" filterable @change="brandQuery">
                <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年份" prop="year">
              <el-select v-model="queryParams1.year" filterable @change="brandQuery">
                <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="月份" prop="month" v-if="queryParams1.mode=='m'">
              <el-select v-model="queryParams1.month" filterable @change="brandQuery">
                <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="周" prop="week" v-if="queryParams1.mode=='w'" >
              <el-select v-model="queryParams1.week" filterable @change="brandQuery">
                <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top:5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单</span>
          </div>
          <el-row>
            <el-col :span="16">
              <el-card>
                <el-table :data="brandjd" border stripe>
                  <el-table-column label="品类" align="center" prop="brand">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.brand }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.brand }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(万元)" align="center" prop="money" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.money }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.money }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额占比" align="center" prop="mrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.mrate }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量(万)" align="center" prop="qty" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.qty }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qty }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量占比" align="center" prop="qrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qrate }}%</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <div ref="bc1" style="width: 100%; height: 274px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top:5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">出库</span>
          </div>
          <el-row>
            <el-col :span="16">
              <el-card>
                <el-table :data="brandck" border stripe>
                  <el-table-column label="品类" align="center" prop="brand">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.brand }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.brand }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(万元)" align="center" prop="money" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.money }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.money }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额占比" align="center" prop="mrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.mrate }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量(万)" align="center" prop="qty" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.qty }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qty }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量占比" align="center" prop="qrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qrate }}%</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <div ref="bc2" style="width: 100%; height: 274px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="业务员数据" name="third">
        <el-card>
          <el-form :model="queryParams2" ref="queryForm2" size="small" :inline="true" label-width="80px" label-position="right">
            <el-form-item label="查询方式" prop="mode">
              <el-select v-model="queryParams2.mode" filterable @change="staffQuery">
                <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年份" prop="year">
              <el-select v-model="queryParams2.year" filterable @change="staffQuery">
                <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="月份" prop="month" v-if="queryParams2.mode=='m'">
              <el-select v-model="queryParams2.month" filterable @change="staffQuery">
                <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="周" prop="week" v-if="queryParams2.mode=='w'" >
              <el-select v-model="queryParams2.week" filterable @change="staffQuery">
                <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="人员" prop="week">
              <el-select v-model="queryParams2.staff" filterable @change="staffQuery">
                <el-option v-for="item in staffList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="margin-top:5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">接单</span>
          </div>
          <el-row>
            <el-col :span="16">
              <el-card>
                <el-table :data="staffjd" border stripe>
                  <el-table-column label="品类" align="center" prop="brand">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.brand }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.brand }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="业务人员" align="center" prop="salename">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.salename }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(万元)" align="center" prop="money" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.money }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.money }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额占比" align="center" prop="mrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.mrate }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量(万)" align="center" prop="qty" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.qty }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qty }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量占比" align="center" prop="qrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qrate }}%</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <div ref="st1" style="width: 100%; height: 274px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top:5px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;color: #0099ff;font-size: 16px;">出库</span>
          </div>
          <el-row>
            <el-col :span="16">
              <el-card>
                <el-table :data="staffck" border stripe>
                  <el-table-column label="品类" align="center" prop="brand">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.brand }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.brand }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="业务人员" align="center" prop="salename">
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.salename }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.salename }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(万元)" align="center" prop="money" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.money }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.money }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="金额占比" align="center" prop="mrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.mrate }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量(万)" align="center" prop="qty" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">{{ scope.row.qty }}</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qty }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量占比" align="center" prop="qrate" sortable>
                    <template slot-scope="scope">
                      <span v-if="scope.row.brand=='合计'" style="font-size:18px;color:red;font-weight:bold;">-</span>
                      <span v-if="scope.row.brand!='合计'">{{ scope.row.qrate }}%</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <div ref="st2" style="width: 100%; height: 274px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="产品排名分析" name="fourth">
        <el-card>
          <el-form :model="queryParams3" ref="queryForm3" size="small" :inline="true" label-width="80px" label-position="right">
            <el-form-item label="查询方式" prop="mode">
              <el-select v-model="queryParams3.mode" filterable @change="getProductQuery">
                <el-option v-for="item in modeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年份" prop="year">
              <el-select v-model="queryParams3.year" filterable @change="getProductQuery">
                <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="月份" prop="month" v-if="queryParams3.mode=='m'">
              <el-select v-model="queryParams3.month" filterable @change="getProductQuery">
                <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="周" prop="week" v-if="queryParams3.mode=='w'" >
              <el-select v-model="queryParams3.week" filterable @change="getProductQuery">
                <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-row>
          <el-col :span="6">
            <el-card style="margin-top:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">自产苗</span>
              </div>
              <div ref="p1" style="width: 100%; height: 2000px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-top:5px;margin-left:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">其他</span>
              </div>
              <div ref="p2" style="width: 100%; height: 700px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-top:5px;margin-left:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋桔梗</span>
              </div>
              <div ref="p4" style="width: 100%; height: 700px;"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="margin-top:5px;margin-left:5px;">
              <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">洋牡丹</span>
              </div>
              <div ref="p3" style="width: 100%; height: 700px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listYjSummary,listBrandParam,listBrandData,listStaffData,listProductQuery } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';

export default {
  name: "Xmtsummary",
  data() {
    return {
      activeName: 'first',
      yjSummaryData:{},
      feeInfo: {},
      modeList: [
        {
          value:"y",
          label:"年"
        },
        {
          value:"m",
          label:"月"
        },
        {
          value:"w",
          label:"周"
        }
      ],
      yearList:[],
      monthList:[],
      weekList:[],
      staffList:[
        {
          value:"许楠",
          label:"许楠"
        },
        {
          value:"飞敏娜",
          label:"飞敏娜"
        },
      ],
      brandjd: [],
      brandck: [],
      staffjd: [],
      staffck: [],
      queryParams1: {
        mode: null,
        year: null,
        month: null,
        week: null,
      },
      queryParams2: {
        mode: null,
        year: null,
        month: null,
        week: null,
        staff: null,
      },
      queryParams3: {
        mode: null,
        year: null,
        month: null,
        week: null,
      },
    }
  },
  created() {
    this.getYjSummary();
  },
  mounted(){

  },
  methods: {
    handleClick(tab, event) {
      if(tab.index==1){
        this.queryParams1.mode = 'y';
        this.getBrandParam();
      }else if(tab.index==2){
        this.queryParams2.mode = 'y';
        this.queryParams2.staff = '许楠';
        this.getStaffParam();
      }else if(tab.index==3){
        this.queryParams3.mode = 'y';
        this.getProductParam();
      }
    },
    getProductParam(){
      listBrandParam().then(res =>{
        this.yearList = res.data.years;
        this.monthList = res.data.months;
        this.weekList = res.data.weeks;
        this.queryParams3.year = res.data.year;
        this.queryParams3.month = res.data.month;
        this.queryParams3.week = res.data.week;
        this.getProductQuery();
      })
    },
    getStaffParam(){
      listBrandParam().then(res =>{
        this.yearList = res.data.years;
        this.monthList = res.data.months;
        this.weekList = res.data.weeks;
        this.queryParams2.year = res.data.year;
        this.queryParams2.month = res.data.month;
        this.queryParams2.week = res.data.week;
        this.staffQuery();
      })
    },
    getBrandParam(){
      listBrandParam().then(res =>{
        this.yearList = res.data.years;
        this.monthList = res.data.months;
        this.weekList = res.data.weeks;
        this.queryParams1.year = res.data.year;
        this.queryParams1.month = res.data.month;
        this.queryParams1.week = res.data.week;
        this.brandQuery();
      })
    },
    getProductQuery(){
      listProductQuery(this.queryParams3).then(res =>{
        console.log(res.data)
        const p1 = echarts.init(this.$refs.p1);
        const p2 = echarts.init(this.$refs.p2);
        const p3 = echarts.init(this.$refs.p3);
        const p4 = echarts.init(this.$refs.p4);
        let label_zcm = [];
        for(let i=0;i<res.data.zcm.length;i++){
          label_zcm.push(res.data.zcm[i].bigname);
        }
        let label_qt = [];
        for(let i=0;i<res.data.qt.length;i++){
          label_qt.push(res.data.qt[i].bigname);
        }
        let label_ymd = [];
        for(let i=0;i<res.data.ymd.length;i++){
          label_ymd.push(res.data.ymd[i].bigname);
        }
        let label_yjg = [];
        for(let i=0;i<res.data.yjg.length;i++){
          label_yjg.push(res.data.yjg[i].bigname);
        }
        const option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: label_zcm,
          },
          series: [
            {
              type: 'bar',
              data: res.data.zcm.map(item => ({
                value: item.money,
                name: item.bigname,
                extraInfo: "品类："+item.bigname+"<br />金额："+item.money+"万元<br/>数量："+item.qty
              })),
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}万元' // 标签内容格式化为数据值
              }
            }
          ]
        };
        p1.setOption(option1);

        const option2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: label_qt,
          },
          series: [
            {
              type: 'bar',
              data: res.data.qt.map(item => ({
                value: item.money,
                name: item.bigname,
                extraInfo: "品类："+item.bigname+"<br />金额："+item.money+"万元<br/>数量："+item.qty
              })),
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}万元' // 标签内容格式化为数据值
              }
            }
          ]
        };
        p2.setOption(option2);

        const option3 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: label_ymd,
          },
          series: [
            {
              type: 'bar',
              data: res.data.ymd.map(item => ({
                value: item.money,
                name: item.bigname,
                extraInfo: "品类："+item.bigname+"<br />金额："+item.money+"万元<br/>数量："+item.qty
              })),
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}万元' // 标签内容格式化为数据值
              }
            }
          ]
        };
        p3.setOption(option3);

        const option4 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              return params[0].data.extraInfo
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: label_yjg,
          },
          series: [
            {
              type: 'bar',
              data: res.data.yjg.map(item => ({
                value: item.money,
                name: item.bigname,
                extraInfo: "品类："+item.bigname+"<br />金额："+item.money+"万元<br/>数量："+item.qty
              })),
              label: {
                show: true, // 显示标签
                position: 'right', // 标签位置
                formatter: '{c}万元' // 标签内容格式化为数据值
              }
            }
          ]
        };
        p4.setOption(option4);
      })
    },
    staffQuery(){
      listStaffData(this.queryParams2).then(res =>{
        this.staffjd = res.data.jdt;
        this.staffck = res.data.ckt;
        const bc1 = echarts.init(this.$refs.st1);
        const bc2 = echarts.init(this.$refs.st2);
        const option1 = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              // 根据系列名或其它条件判断数据所属层级
              if (params.seriesName === "数量") {
                return params.name + "[数量]<br/>" + params.value + "(" + params.percent + "%)<br/>";
              } else if (params.seriesName === "金额") {
                return params.name + "[金额]<br/>" + params.value + "万(" + params.percent + "%)<br/>";
              }
            }
          },
          toolbox: {
            feature: {
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '50%'],
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万'
              },
              labelLine: {
                show: false
              },
              data: res.data.jdc.map(item => ({
                value: item.qty,
                name: item.brand,
              })),
            },
            {
              name: '金额',
              type: 'pie',
              radius: ['65%', '95%'],
              labelLine: {
                length: 30,
                show: false
              },
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万元'
              },
              data: res.data.jdc.map(item => ({
                value: item.money,
                name: item.brand,
              })),
            }
          ]
        };
        bc1.setOption(option1);

        const option2 = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              // 根据系列名或其它条件判断数据所属层级
              if (params.seriesName === "数量") {
                return params.name + "[数量]<br/>" + params.value + "(" + params.percent + "%)<br/>";
              } else if (params.seriesName === "金额") {
                return params.name + "[金额]<br/>" + params.value + "万(" + params.percent + "%)<br/>";
              }
            }
          },
          toolbox: {
            feature: {
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '50%'],
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万'
              },
              labelLine: {
                show: false
              },
              data: res.data.ckc.map(item => ({
                value: item.qty,
                name: item.brand,
              })),
            },
            {
              name: '金额',
              type: 'pie',
              radius: ['65%', '95%'],
              labelLine: {
                length: 30,
                show: false
              },
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万元'
              },
              data: res.data.ckc.map(item => ({
                value: item.money,
                name: item.brand,
              })),
            }
          ]
        };
        bc2.setOption(option2);
      })
    },
    brandQuery(){
      listBrandData(this.queryParams1).then(res =>{
        this.brandjd = res.data.jdt;
        this.brandck = res.data.ckt;
        const bc1 = echarts.init(this.$refs.bc1);
        const bc2 = echarts.init(this.$refs.bc2);
        const option1 = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              // 根据系列名或其它条件判断数据所属层级
              if (params.seriesName === "数量") {
                return params.name + "[数量]<br/>" + params.value + "(" + params.percent + "%)<br/>";
              } else if (params.seriesName === "金额") {
                return params.name + "[金额]<br/>" + params.value + "万(" + params.percent + "%)<br/>";
              }
            }
          },
          toolbox: {
            feature: {
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '50%'],
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万'
              },
              labelLine: {
                show: false
              },
              data: res.data.jdc.map(item => ({
                value: item.qty,
                name: item.brand,
              })),
            },
            {
              name: '金额',
              type: 'pie',
              radius: ['65%', '95%'],
              labelLine: {
                length: 30,
                show: false
              },
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万元'
              },
              data: res.data.jdc.map(item => ({
                value: item.money,
                name: item.brand,
              })),
            }
          ]
        };
        bc1.setOption(option1);

        const option2 = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              // 根据系列名或其它条件判断数据所属层级
              if (params.seriesName === "数量") {
                return params.name + "[数量]<br/>" + params.value + "(" + params.percent + "%)<br/>";
              } else if (params.seriesName === "金额") {
                return params.name + "[金额]<br/>" + params.value + "万(" + params.percent + "%)<br/>";
              }
            }
          },
          toolbox: {
            feature: {
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              name: '数量',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '50%'],
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万'
              },
              labelLine: {
                show: false
              },
              data: res.data.ckc.map(item => ({
                value: item.qty,
                name: item.brand,
              })),
            },
            {
              name: '金额',
              type: 'pie',
              radius: ['65%', '95%'],
              labelLine: {
                length: 30,
                show: false
              },
              label: {
                position: 'inner',
                fontSize: 12,
                formatter: '{b}: {c}万元'
              },
              data: res.data.ckc.map(item => ({
                value: item.money,
                name: item.brand,
              })),
            }
          ]
        };
        bc2.setOption(option2);
      })
    },
    getYjSummary(){
      listYjSummary().then(res =>{
        this.yjSummaryData = res.data;
        this.feeInfo = res.data.list[0];
      })
    },
  }
}
</script>
